<template lang="jade">
  .vue__component__root
    .panel
      a.user_basic.weui_media_box.weui_media_appmsg.weui_cells_access
        .user_photo.weui_media_hd(@click.stop="changeAvator")
          img
        .user_info.weui_media_bd
          h4.user_name {{userInfo.basicInfo.name}}
            span.user_level(v-bind:class="'level_' + userInfo.basicInfo.level")
          .user_other_info
            span
              span.info_label 身高 
              span {{userInfo.basicInfo.height}}
            span
              span.info_label 体重 
              span {{userInfo.basicInfo.weight}}
            span
              span.info_label BMI 
              span {{userInfo.basicInfo.bmi}}
            span
              span.info_label 会籍 
              span {{userInfo.basicInfo.local}}
        span.weui_cell_ft
      .columns
          cellColumn.border_bottom(v-bind:columnData="userInfo.score")
          cellColumn.border_bottom(v-bind:columnData="userInfo.validDays")
          cellCards(v-bind:columnData='userInfo.achievements')
          cellItems.border_bottom(v-bind:columnData='userInfo.health')
          cellColumn.border_bottom(v-bind:columnData="userInfo.history")
</template>
<script>

/*global $*/
import Vue from 'Vue';
import cellColumn from './cell_column.vue'
import cellCards from './cell_cards.vue'
import cellItems from './cell_items.vue'
import {mapGetters, mapActions} from 'vuex'
import _ from 'lodash'
export default {
  methods: {
    ...mapActions(['fetchData', 'uploadAvator']),
    async loadData () {
      let userInfo = await this.fetchData();
      this.$store.commit('UPDATE', {
            key: 'userInfo',
            value: userInfo
        })
    },

    async changeAvator() {
      let userPhoto = await this.uploadAvator(this.userInfo.basicInfo.id);

      this.$store.commit('UPDATE', {
        key: 'userInfo',
        value: Object.assign({}, this.userInfo.basicInfo, {
          avator: userPhoto
        })
      })
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  props: [],
  watch: {},
  components: {cellColumn, cellCards, cellItems},
  events: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    this.loadData();
  }
}
</script>
<style scoped>
.user_basic {
  background-image: url("../../../../assets/bg-01.png"); 
}

.user_photo {
  width: 5rem;
  height: 5rem;
}

.user_photo img {
  width: 100%;
  height: 100%;
  border-radius: 10rem;
  background-color: #262834;
}

.user_level {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: text-top;
  margin-left: 10px;
}

.user_info {
  color: #fff;
}

.user_other_info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.9rem;
}

.user_other_info .info_label {
  color: #ed9803;
  min-width: 2.5rem;
  display: inline-block;
}

.border_bottom {
  border-bottom: 1px solid #E5E5E5;
}

.level_1 {
    background-image: url("../../../../assets/level_1.png"); /* for level-gold */
}

.level_2 {
    background-image: url("../../../../assets/level_2.png"); /* for level-silver */
}

.level_3 {
    background-image: url("../../../../assets/level_3.png"); /* for level-bronze */
}

</style>
